<template>
  <el-menu
      default-active="1"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      :router="true"
      @open="handleOpen"
      @close="handleClose"
  >
    <el-menu-item index="/dsManage">
      <el-icon><Setting /></el-icon>
      <template #title>数据源管理</template>
    </el-menu-item>

    <el-menu-item index="/taskGroupManage">
      <el-icon><Menu /></el-icon>
      <template #title>任务组管理</template>
    </el-menu-item>

    <el-menu-item index="/taskManage">
      <el-icon><Timer /></el-icon>
      <template #title>任务管理</template>
    </el-menu-item>

    <el-menu-item index="/taskRecord">
      <el-icon><Tickets /></el-icon>
      <template #title>任务运行记录</template>
    </el-menu-item>

    <el-menu-item index="/executorMonitor">
      <el-icon><View /></el-icon>
      <template #title>执行器监控</template>
    </el-menu-item>
  </el-menu>
</template>

<script lang="ts" setup>
import {ref} from "vue";

const isCollapse = ref(false);
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
</script>

